<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            margin:0 auto;
            text-align: center;
        }
        .look{
            width:200px;
            height: 200px;
            margin:0 auto;
        }
        .input {
            width:170px;
            border-radius: 8px;
            outline:none;
            height: 25px;
            margin-bottom: 10px;
            border:1px solid skyblue;
            padding-left:15px;
            padding-right:15px;
        }
        .btn{
            background:skyblue;
            width: 100%;
            height: 25px;
            border:none;
            color:white;
            font-size:14px;
            border-radius: 7px;
            cursor:pointer;
            outline:none;
        }
        a{
            color:red;
            text-decoration:none;
            float:left;
            margin-top:20px;
        }
        .error{
            color:red;
            font-size:14px;
            display: none;
        }
    </style>
</head>
<body>
<h1>登陆界面</h1>
<div class="look">

        <input type="text" name="username" class="input username" placeholder="请输入用户名"/>
        <input type="password" name="password" class="input password" placeholder="请输入密码" />
        学生:<input type="radio" name="profession" value="student"/>老师:<input type="radio" name="profession" value="teacher"/>
        <input type="submit" value="登录" class="btn"/>
        <span class="error error1">账号密码不正确或信息不匹配</span>
        <span class="error error2">请填写完整信息</span>
        <a href="http://127.0.0.1:3000/reg">立刻注册</a>
</div>
</body>
<script src="jquery-1.11.1.js"></script>
<script>
    $(function() {
        $('.btn').click(function () {

            var name = $('.username').val();
            var password = $('.password').val();
            var profession = $("input[name='profession']:checked").val();
            var data = {
                name: name,
                password: password,
                profession:profession
            }
            if(name!=''&&password!=''&&profession!=undefined){
                $.post("http://127.0.0.1:3000/denglu", data, function (data, textStatus, xhr) {
                    if(String(data)=='teacher'){
                        localStorage.setItem('name',name);
                        window.location.href="http://127.0.0.1:3000/userinfo";
                    }
                    else if(String(data)=='student'){
                        localStorage.setItem('name',name);
                        window.location.href="http://127.0.0.1:3000/student";
                    }else{
                        $('.error').css('display','none');
                        $('.error1').css('display','block');
                    }
                })
            }else{
                $('.error').css('display','none');
                $('.error2').css('display','block');
            }

        })
    })
</script>
</html>